<template>
    <table class="table table-striped table-bordered">
        <!-- 表格标题区域 -->
        <thead>
            <tr>
                <!-- <th>#</th>
                <th>商品名称</th>
                <th>价格</th>
                <th>标签</th>
                <th>操作</th> -->
                <th v-for="(item, index) in titleList" :key="index">
                    {{ item }}
                </th>
                <!-- 标题行所有单元格插槽化 -->
                <slot name="head">
                    <th>字段1</th>
                    <th>字段2</th>
                    <th>字段3</th>
                </slot> 
            </tr>
        </thead>
        <!-- 表格主体区域 -->
        <tbody>
            <!-- 只有一行 -->
            <tr v-for="(item, index) in goodsList" :key="index">
                <slot name="body" :row="item" :ind="index">
                    <td>数据1</td>
                    <td>数据2</td>
                    <td>数据3</td>
                </slot>
            </tr>
        </tbody>
    </table>
</template>
<script setup>
const props = defineProps(['titleList', 'goodsList'])
</script>
<style scoped>

</style>